<template>
  <div class="row container-fluid">
    <div class="col-md-1 btn-group openssh-btn">
      <button type="button" class="btn btn-success" @click="createHost" data-toggle="modal"
              data-whatever="@getbootstrap">新建设备
      </button>
    </div>
    <div class="modal fade" id="createHost" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
              aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="createHostLabel">创建设备</h4>
          </div>
          <form @submit.prevent="submit">
            <input type="hidden" v-model="host.id" id="id"/>
            <div class="form-group">
              <label for="ip">IP地址</label>
              <input class="form-control" v-model="host.ip" id="ip" placeholder="IP地址">
            </div>
            <div class="form-group">
              <label for="port">端口</label>
              <input type="number" class="form-control" v-model="host.port" id="port" placeholder="端口">
            </div>
            <div class="form-group">
              <label for="name">设备名</label>
              <input type="text" class="form-control" id="name" v-model="host.name" placeholder="设备名">
            </div>
            <div class="form-group">
              <label for="username">用户名</label>
              <input type="text" class="form-control" id="username" v-model="host.username" placeholder="用户名">
            </div>
            <div class="form-group">
              <label for="password">密码</label>
              <input type="text" class="form-control" v-model="host.passwd" id="password" placeholder="密码">
            </div>

            <div class="modal-footer">
              <input type="button" class="btn btn-primary" @click="submit" value="提交">
            </div>
          </form>
        </div>
      </div>
    </div>
    <table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline col-md-12"
           id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
      <thead>
      <tr role="row">
        <th class="sorting_asc" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
            aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending"
            style="width: 284px;">设备名称
        </th>
        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
            aria-label="Browser: activate to sort column ascending" style="width: 340px;">IP
        </th>
        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
            aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">端口
        </th>
        <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
            aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">操作
        </th>
      </tr>
      </thead>
      <tbody>
      <tr class="gradeA even" role="row" v-for="host in getHostlist" :key="host.id">
        <td class="sorting_1">{{ host.name }}</td>
        <td>{{ host.ip }}</td>
        <td>{{ host.port }}</td>
        <td><a @click="updateForm(host)">修改</a>|<a @click="delelte(host.id)">删除</a>|
          <router-link :to="{name:'term',params:{id:host.id}}">连接远程电脑</router-link>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import api from '../api/host'

  function selectModal(state) {
    $('#createHost').modal(state)
  }
  var model = {
          ip: '',
          port: '',
          name: '',
          username: '',
          passwd: ''
        }
  export default {
    name: 'Host',
    data() {
      return {
        host:model
      }
    },
    created() {
      this.$store.dispatch("getIndexHosts")
    },
    computed: {
      ...mapGetters({
        getHostlist: 'allHostsList'
      })
    },
    methods: {
      submit() {
        api.postHost(this.host, res => {
          this.$store.dispatch("createHostUpdateIndex", res.data.response)
          selectModal('hide')
        })
      },
      createHost() {
        this.host = model;
        selectModal("show");
      },
      delelte(id) {
        api.delete(id);
        this.$store.dispatch("deleteHostUpdateIndex", id)
      },
      updateForm(host) {
        this.host = host;
        selectModal('show')
      },
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .openssh-btn {
    margin: 20px 0px;
  }
</style>
